<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 

        1. props 需要首先在 组件中通过 props 选项定义
        2. props 选项支持 [] 简单格式写法。还有 {} 的写法
            ['name', 'age']
            {
                'name': String // String|Number|Function|Boolean|Object|Symbol|Date|Array
                'age': {
                    type: String // String|Number|Function|Boolean|Object|Symbol|Date|Array
                    required: true|false
                    default: ''
                }
            }
        3. 设置 prop 默认值的时候，如果默认值是一个对象或者数组格式，不能直接写，需要使用 函数返回的方式。
        4. prop的名字
            4.1 name     单个单词
            4.2 myName   小驼峰

            当使用小驼峰时，模板中传递prop的时候，需要转换成 短横线写法。跟 组件名的规则类似，同样在下列三种情况下可以不转换：
                1. template 字符串
                2. <script type="text/x-template" id="xxx"></script>
                3. 后缀名为 .vue 的单文件组件中

        5. 组件接收到的prop不允许修改。。。。！！！！！！！！！！
            儿子不能改父亲给的东西
            1. 遵循单向数据流这个规则

     -->
    <div id="app">
      <button @click="count++">{{ count }}</button>

      <person my-name="张三" :my-age="18"></person>
    </div>

    <script src="./js/vue.js"></script>
    <script>
      Vue.config.productionTip = false;

      //   Vue.extend()

      // const person = Vue.extend({
      //   template: `
      //         <div>
      //             <h1>姓名：张三</h1>
      //         </div>
      //     `,
      // });
      // console.log(person);

      Vue.component("person", {
        props: ["myName", "myAge"],

        computed: {
          hello() {
            return `大家好，我是${this.myName}，年龄是${this.myAge}`;
          },
        },

        methods: {
          add() {
            // console.log(this);
            // console.log(this.myAge);
            // console.log(this.hello);
            this.myAge++;
          },
        },

        template: `
            <div>
              <button @click="add">大一岁</button>
              <h2>姓名：{{ myName }}</h2>
              <h2>年龄：{{ myAge }}</h2>
              <p v-text="hello"></p>
            </div>
        `,
      });

      new Vue({
        el: "#app",

        data: function () {
          return {
            count: 1,
          };
        },
      });
    </script>
  </body>
</html>
